import React, { useEffect, useState } from "react";
import { modalPropsType } from "@/constants/types";
import { Modal, Descriptions, Space, Button } from "antd";
import { fetchActivityDetail } from "../../services"; 
import XlTableDictColumn from "@/components/Table/XlTableDictColumn";
import { downloadFile } from "@/utils/util";


const ViewActivityCode = ({title, visible, onCancel, currentRow}: modalPropsType) => {
  const [detail, setDetail] = useState<any>({});


  useEffect(() => {
    if (currentRow?.id) {
      fetchActivityDetail({id: currentRow?.id}).then(
        res => {
          setDetail(res || {});
        }
      )
    } else {
      setDetail({});
    }
  }, [currentRow?.id])

  return (
    <Modal
      title={title}
      onCancel={onCancel}
      open={visible}
      footer={false}
      width="1200px"
    >
      <div className="modal-form-padding">
        <Descriptions column={3}>
          <Descriptions.Item label="活动状态"><strong><XlTableDictColumn type="activityStatus" value={detail?.status} /></strong></Descriptions.Item>
          <Descriptions.Item label="奖励优惠券">
            <Space direction="vertical">
              {
                detail?.rewards?.map((v: any) => <span key={v?.id}>{v?.rewardName}</span>)
              }
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="创建人"><strong>{detail?.createBy}</strong></Descriptions.Item>
          <Descriptions.Item label="活动名称"><strong>{detail?.name}</strong></Descriptions.Item>
          <Descriptions.Item label="满减券">
            <Space direction="vertical">
              {
                detail?.rewards?.filter((v: any) => v.rewardType === '1')?.map((v: any) => <span key={v?.id}>{v?.rewardName}</span>)
              }
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="创建时间"><strong>{detail?.createTime}</strong></Descriptions.Item>
          <Descriptions.Item label="活动类型"><strong><XlTableDictColumn type="activityType" value={detail?.type} /></strong></Descriptions.Item>
          <Descriptions.Item label="抵扣券">
            <Space direction="vertical">
              {
                detail?.rewards?.filter((v: any) => v.rewardType === '2')?.map((v: any) => <span key={v?.id}>{v?.rewardName}</span>)
              }
            </Space>
          </Descriptions.Item>
          {detail?.type === '2' && <Descriptions.Item label="奖励总数量"><strong>{detail?.rewardNum === -1 ? '不限制' : detail?.rewardNum}</strong></Descriptions.Item>}
        </Descriptions>

        <Descriptions column={1}>
          <Descriptions.Item label="优惠券有效期">
            {detail?.rewardTimeType === '1' && <strong>{detail?.rewardStartTime} - {detail?.rewardEndTime}</strong>}
            {detail?.rewardTimeType === '2' && <strong>领取后{detail?.rewardExpiredDay}天</strong>}
          </Descriptions.Item>
        </Descriptions>
        <Descriptions column={2}>
          <Descriptions.Item label="活动开始时间"><strong>{detail?.startTime}</strong></Descriptions.Item>
          <Descriptions.Item label="活动结束时间"><strong>{detail?.endTime}</strong></Descriptions.Item>
        </Descriptions>
        <Descriptions column={1}>
          {/* <Descriptions.Item label="适用地区"><strong></strong></Descriptions.Item> */}
          <Descriptions.Item label="活动地址"><strong>{detail?.url}</strong></Descriptions.Item>
        </Descriptions>
        {
          detail?.type === '3' && (
            <Descriptions column={1}>
              <Descriptions.Item label="指定客户名单"><strong>{detail?.activityCustomerName}</strong></Descriptions.Item>
            </Descriptions>
          )
        }
      </div>
    </Modal>
  );
}
export default ViewActivityCode;